@import './reset.css';
@import './element-reset.scss';
@import './page-ui.scss';

.cursor-pointer {
  cursor: pointer;
}

.flex {
  display: flex;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-align-center {
  display: flex;
  align-items: center;
}

.clickable {
  cursor: pointer;
  &:hover {
    color: $primary-color;
  }
}

.w100 {
  width: 100%;
}

@for $i from 1 through 30 {
  .p-#{$i} {
    padding: #{$i}px;
  }
  .pl-#{$i} {
    padding-left: #{$i}px;
  }
  .pr-#{$i} {
    padding-right: #{$i}px;
  }
  .pt-#{$i} {
    padding-top: #{$i}px;
  }
  .pb-#{$i} {
    padding-bottom: #{$i}px;
  }
  .m-#{$i} {
    margin: #{$i}px;
  }
  .ml-#{$i} {
    margin-left: #{$i}px;
  }
  .mr-#{$i} {
    margin-right: #{$i}px;
  }
  .mt-#{$i} {
    margin-top: #{$i}px;
  }
  .mb-#{$i} {
    margin-bottom: #{$i}px;
  }
  .fs-#{$i} {
    font-size: #{$i}px;
  }
}